<template>
	<view :style="themeColor">
		<view class="page">
			<view :class="scrollTop > 30 ? 'blue_bg' : ''" class="flex flex-direction align-stretch benben-position-layout flex home_flex_0" :style="{height:(190+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-center home_fd0_0'>
					<text class='home_fd0_0_c0'>悟空学院</text>
				</view>
				<view class='home_fd0_1'>
					<view class='flex align-center justify-center  home_fd0_1_c0' @tap.stop="handleJumpDiy"
						data-type="navigateTo" :data-url="`/pages/sy/search/search`">
						<image class='home_fd0_1_c0_c0' mode="aspectFit" :src='STATIC_URL+"183.png"'></image>
						<text class='home_fd0_1_c0_c1'>搜索你想要的课程</text>
					</view>
				</view>

			</view>
			<view :style="{height: (190+StatusBarRpx)+'rpx'}"></view>
			
			<!---flex布局flex布局开始-->
			<view class="flex flex-wrap align-center justify-center benben-flex-layout home_flex_1">
				<view style="position: relative">
					<swiper ref="benbenSwiperfd1_0" :current='index' @change="bannerIndexfd1_0 = $event.detail.current"
						class='flex position-relative home_fd1_0' previous-margin="0rpx" next-margin="0rpx"
						:display-multiple-items="1" :interval="5000" :duration="500" :autoplay='true' :circular='true'>

						<template v-for='(item,key0) in dataRotograph'>
							<swiper-item class='flex  home_fd1_0_c1' :key='key0'>
								<image class='home_fd1_0_c1_c0' mode="aspectFill" :src='item.thumb'
									@tap.stop="goSwiperDetails(item.href)"></image>
							</swiper-item>
						</template>

					</swiper>
					<view style="position: absolute"
						class="flex dot flex align-center justify-center home_swiperDotfd1_0">
						<template v-for="(item, index) in (dataRotograph.length)">
							<view :key="index" v-if="bannerIndexfd1_0 == index"
								class="flex dot selected flex align-center justify-center home_swiperDotSelectedfd1_0">
							</view>
							<view :key="index" v-else
								class="flex dot unselected flex align-center justify-center home_swiperDotUnselectedfd1_0">
							</view>
						</template>
					</view>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<template v-if="ground_status == 1 && is_ios == 1">
				<view class="shop_info">
					<view class="shop_info_left">资料</view>
					<view class="shop_info_right">
						<text>订单</text>
						<u-icon size="26" name="arrow-right" color="#999"></u-icon>
					</view>
				</view>
				<view class="flex flex-wrap align-center benben-flex-layout searchResult_flex_3">
					<view class='flex flex-direction flex-wrap align-stretch searchResult_fd3_0' v-for="(v, k) in dataList" :key="k" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/shopMall/shopDetail?id=${v.aid}`">
						<image class='searchResult_fd3_0_c0' mode="scaleToFill" :src='v.fengmiantu'></image>
						<view class='flex flex-direction flex-wrap align-stretch searchResult_fd3_0_c1'>
							<view class='searchResult_fd3_0_c1_c0'>{{v.ziliaomingcheng}}</view>
							<view class='flex flex-wrap align-center'>
								<text class='searchResult_fd3_0_c1_c1_c0'>￥</text>
								<view class=' searchResult_fd3_0_c1_c1_c1'>
									<text class=' searchResult_price1_fd3_0_c1_c1_c1'>{{ v.jiage | frontPrice }}</text>
									<text class=' searchResult_price2_fd3_0_c1_c1_c1'>{{ v.jiage | laterPrice }}</text>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore v-if="last_page > 1" style="padding: 24rpx 0;width: 100%;" :status="status"
						:icon-type="iconType" :load-text="loadText" />
				</view>
			</template>
			
			

			<view class="tabs_info">
				<u-tabs bg-color="transparent" :list="tabList" :bar-style="barStyle" name="short_name" active-color="#101010" bar-width="40" bar-height="6" :is-scroll="true" inactive-color="#969696" font-size="30" gutter="10" :current="current" @change="change"></u-tabs>
			</view>
			
			<view class="loading_css" v-if="isShow">
				<u-loading size="36" color="#3090FF"></u-loading>
				<view>加载中</view>
			</view>
			<template v-else>
				<!---flex布局flex布局开始-->
				<view class="flex benben-flex-layout flex-wrap align-center home_flex_3" v-if="current == 0">
					<template v-for="(item, index) in list">
						<course :item="item"></course>
					</template>
					<view class="loadmore" v-if="last_page > 1">
						<u-loadmore font-size="24" :status="status" :icon-type="iconType" :load-text="loadText" />
					</view>
				</view>
				
				<!---flex布局flex布局结束-->
				<!---flex布局flex布局开始-->
				<view class="flex benben-flex-layout flex-wrap align-center home_flex_4" v-if="current != 0">
					<view class='flex flex-wrap align-center home_fd4_0'>
						<image class='home_fd4_0_c0' mode="aspectFill" :src='courseInfo.thumb'></image>
						
						<view class='flex flex-direction flex-wrap align-stretch home_fd4_0_c1'>
							<view class='flex justify-between home_fd4_0_c1_c0'>
								<view class='home_fd4_0_c1_c0_c0'>{{courseInfo.title}}</view>
								<image v-if="courseInfo.is_buy == 1" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/sy/cachVideo/cachVideo?id=${courseInfo.aid}`" style="width: 42rpx;height: 42rpx;" :src='STATIC_URL+"520.png"' mode="aspectFill"></image>
							</view>
							<view class='flex flex-wrap align-center home_fd4_0_c1_c1'>
								<text class='home_fd4_0_c1_c1_c0'>{{courseInfo.synopsis}}</text>
							</view>
							<view class='flex flex-wrap align-center' v-if="courseInfo.is_buy == 0">
								<text class='home_fd4_0_c1_c2_c0'>￥</text>
								<text class='home_fd4_0_c1_c2_c1'>{{courseInfo.price}}</text>
							</view>
						</view>
					</view>
					<view class='flex flex-direction flex-wrap align-stretch home_fd4_1'>
						<u-tabs :list="courseList" :bar-style="barStyle" active-color="#101010" bar-width="40" bar-height="6" :is-scroll="false" inactive-color="#969696" font-size="30" gutter="10" :current="courseCurrent" @change="change1"></u-tabs>
						<view class='flex flex-wrap align-center' style="margin-top: 24rpx;" v-if="courseCurrent == 0">
							<jyf-parser class='home_fd4_1_c2_c0' :html="courseInfo.conent | richTextFormat"></jyf-parser>
						</view>
						<template v-if="courseCurrent == 1">
							<view class='flex flex-direction' v-for="(item, index) in directoryList" :key="index">
								<view class='flex flex-wrap align-stretch home_fd4_1_c3_c0'>
									<text class='home_fd4_1_c3_c0_c0'>{{item.name}}</text>
								</view>
								<template v-for="(v, k) in item.children">
									<view class='flex justify-between home_fd4_1_c3_c1' @tap.stop="viewVideo(v.aid, v.shipin, v.is_download, v.name, v.learn)">
										<view class='flex' style="width: calc(100% - 46rpx);">
											<image class='home_fd4_1_c3_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"513.png"'>
											</image>
											<view class='home_fd4_1_c3_c1_c0_c1'>{{v.name}}</view>
										</view>
										<view class='flex'>
											<image class='home_fd4_1_c3_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"514.png"' v-if="courseInfo.is_buy == 0">
											</image>
											<template v-if="courseInfo.is_buy == 1">
												
												<image v-if="v.is_download == 1" class='home_fd4_1_c3_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"515.png"'>
												</image>
												<image v-else class='home_fd4_1_c3_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"516.png"'>
												</image>
											</template>
										</view>
									</view>
								</template>
								
							</view>
						</template>
					</view>
					<view class='flex flex-direction flex-wrap align-center self-center home_fd4_2' v-if="courseInfo.is_buy == 0" @tap.stop="goBuy">
						<text class='home_fd4_2_c0'>立即购买</text>
					</view>
					<view class='flex flex-direction flex-wrap align-center self-center home_fd4_2' v-if="courseInfo.is_buy == 1 && is_network == 1" @tap.stop="goStudy">
						<text class='home_fd4_2_c0'>立即学习</text>
					</view>
				</view>
				
				<!---flex布局flex布局结束-->
			</template>

			<view class="title_bg" v-if="scrollTop < 50"></view>
			
			<app-update ref="update" :auto="true"></app-update>
		</view>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	import course from "@/components/course/index.vue"
	export default {
		components: {
			course
		},

		data() {
			return {
				"tabsInfofd4_1_c0_c0": {
					lineleft: '',
					lineWidth: '',
					moveX: 0,
					scrollX: 0,
					PageScrollX: 0
				},
				"tabsTypefd4_1_c0_c0": "1",
				"tabsInfofd2_0": {
					lineleft: '',
					lineWidth: '',
					moveX: 0,
					scrollX: 0,
					PageScrollX: 0
				},
				"tabsTypefd2_0": "",
				"bannerIndexfd1_0": 0,
				"minixPagingListsApi": "",
				"pageingListApiMethod": "",
				"allowOnloadGetList": false,
				
				"directoryList": [], //目录列表
				"list": [],
				"page": 1,
				"is_pull": true,
				"last_page": 1,
				"status": 'loadmore',
				"iconType": 'flower',
				"loadText": {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				"isShow": true,
				"time_id": "1",
				"dataRotograph": [], // 轮播图列表
				"index": 0,
				"swiperNum": "",
				"inputList": [],
				"tabList": [],
				"courseInfo": {},  // 课程详情
				current: 0,
				scrollTop: 0,
				barStyle: {
					backgroundColor: '#3090FF'
				},
				courseList: [{
					name: '课程详情'
				},{
					name: '课程目录'
				}],
				courseCurrent: 0,
				is_network: 0,
				ground_status: 0,
				dataList: [],
				is_ios: 0,
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			}
		},
		watch: {},
		onLoad(options) {
			this.getSwiper();
			this.DataListFunc();
			if (!global.token) {
				uni.reLaunch({
					url: '/pages/tabBar/login/login'
				})
			}
			let _this = this;
			uni.onNetworkStatusChange(function (res) {
				if (res.networkType == 'none') {
					_this.is_network = 0;
				} else{
					_this.is_network = 1;
				}
			});
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			if (global.token) {
				this.getClassification();
				
				let _this = this;
				uni.getNetworkType({
					success: function (res) {
						// console.log(res);
						if (res.networkType == 'none') {
							_this.is_network = 0;
						} else{
							_this.is_network = 1;
						}
					}
				});
				if (uni.getSystemInfoSync().platform == 'ios') {
					this.is_ios = 1;
				} else {
					this.is_ios = 0;
				}
			}
		},
		onHide() {

		},
		onResize() {

		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.is_pull = true;
			this.isShow = true;
			this.getList();
			// this.getDetails();
			// this.getCourseCatalog();
		},
		// 上拉加载
		onReachBottom() {
			if (this.page >= this.last_page) return;
			this.status = 'loading';
			this.page++;
			setTimeout(() => {
		
				if (this.page >= this.last_page) this.status = 'nomore';
				else this.status = 'loading';
				this.is_pull = false;
				this.getList();
			}, 500)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 首页轮播图  post656f17464daf0
			getSwiper() {
				this.$api.post(global.apiUrls.post656f17464daf0, {
					typeid: 1
				}).then(res => {
					this.isShow = false;
					if (res.data.code == 1) {
						this.dataRotograph = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 跳转轮播图详情
			goSwiperDetails(aid) {
				if (aid) {
					uni.navigateTo({
						url: '/pages/sy/bannerDetails/bannerDetails?aid=' + aid
					})
				}
			},
			// 课程分类  post65743b31baab5
			getClassification() {
				let _this = this;
				_this.$api.post(global.apiUrls.post65743b31baab5, {

				}).then(res => {
					// console.log(res);
					let list = res.data.data;
					if (res.data.code == 1) {
						_this.$api.post(global.apiUrls.publicUpdateAPP, {
							
						}).then(res => {
							if (res.data.code == 1) {
								// console.log(res);
								_this.ground_status = res.data.data.app_grounding_status;
								if (res.data.data.app_grounding_status == 0) {
									_this.tabList = list;
									_this.tabList.unshift({
										aid: -1,
										short_name: '推荐',
										title: '推荐'
									});
									
								} else if (res.data.data.app_grounding_status == 1) {
									_this.tabList = list;
									_this.tabList.unshift({
										aid: -1,
										short_name: '全部',
										title: '全部'
									});
								}
								_this.tabList.push({
									aid: 0,
									short_name: '更多',
									title: '更多'
								});
								_this.getList();
							}
						})
						
						
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 课程列表  post65743a8776b1d
			getList() {
				this.$api.post(global.apiUrls.post65743a8776b1d, {
					is_recommend: 1,
					page: this.page
				}).then(res => {
					// console.log(res);
					uni.stopPullDownRefresh();
					this.isShow = false;
					if (res.data.code == 1) {
						this.last_page = res.data.data.last_page;
						if (this.is_pull) {
							this.list = res.data.data.data;
						} else {
							this.list = this.list.concat(res.data.data.data);
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 课程详情  post65743bb4bfd8a
			getDetails() {
				this.isShow = true;
				this.$api.post(global.apiUrls.post65743bb4bfd8a, {
					aid: this.tabList[this.current].aid
				}).then(res => {
					this.isShow = false;
					// console.log(res);
					if (res.data.code == 1) {
						this.courseInfo = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 课程目录  post65743c6fb43e4
			getCourseCatalog() {
				this.$api.post(global.apiUrls.post65743c6fb43e4, {
					aid: this.tabList[this.current].aid
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.directoryList = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			
			change(index) {
				if (index == 0) {
					this.current = index;
					return;
				}
				if (index == this.tabList.length - 1) {
					uni.navigateTo({
						url: '/pages/sy/moreCourse/moreCourse'
					})
					return;
				}
				this.current = index;
				this.getDetails();
				this.getCourseCatalog();
			},
			change1(index) {
				this.courseCurrent = index;
			},
			
			// 立即购买
			goBuy() {
				uni.navigateTo({
					url: '/pages/sy/confirmOrder/confirmOrder?aid=' + this.tabList[this.current].aid
				})
			},
			// 去学习
			goStudy() {
				if (this.directoryList.length == 0) {
					this.$message.info('请联系客服添加课程目录');
				}
				if (this.directoryList.length > 0) {
					let videoUrl = {
						url: "",
						id: "",
						is_download: "",
						name: "",
						learn: 0
					};
					let index1 = -1;
					let index2 = -1;
					jump:
					for (let i = 0; i < this.directoryList.length; i++) {
						if (this.directoryList[i].children.length > 0) {
							for (let k = 0; k < this.directoryList[i].children.length; k++) {
								if (this.directoryList[i].children[k].is_watch == 0) {
									index1 = i
									index2 = k
									break jump;
								}
							}
						}
					}
					if (index2 == -1) {
						this.directoryList.forEach((v, k) => {
							if (v.children.length > 0) {
								v.children.forEach((v1, k1) => {
									if (k1 == 0) {
										videoUrl.url = v1.shipin
										videoUrl.id = v1.aid
										videoUrl.is_download = v1.is_download
										videoUrl.name = v1.name
										videoUrl.learn = v1.learn
									}
								})
							}
						})
					} else {
						videoUrl.url = this.directoryList[index1].children[index2].shipin;
						videoUrl.id = this.directoryList[index1].children[index2].aid;
						videoUrl.is_download = this.directoryList[index1].children[index2].is_download;
						videoUrl.name = this.directoryList[index1].children[index2].name;
						videoUrl.learn = this.directoryList[index1].children[index2].learn;
					}
					uni.setStorageSync('videoUrl', videoUrl);
					uni.navigateTo({
						url: '/pages/sy/seeVideo/seeVideo'
					})
				}
			},
			viewVideo(id, url, is_download, name, learn) {
				if (this.courseInfo.is_buy == 0) {
					this.$message.info('请先购买课程');
					return;
				}
				let _this = this;
				let videoUrl = {
					url: "",
					id: id,
					is_download: is_download,
					name: name,
					learn: learn
				};
				let saveFileList = [];
				if (uni.getStorageSync('saveFileList')) {
					saveFileList = uni.getStorageSync('saveFileList');
				}
				if (_this.is_network == 0) {
					if (saveFileList.length > 0) {
						let index = -1;
						saveFileList.forEach((v, k) => {
							if (v.id == id) {
								index = k;
							}
						})
						if (index == -1) {
							_this.$message.info('视频暂未缓存');
							return;
						} else {
							videoUrl.learn = 0;
							videoUrl.url = saveFileList[index].url;
							uni.setStorageSync('videoUrl', videoUrl);
							uni.navigateTo({
								url: '/pages/sy/seeVideo/seeVideo'
							})
						}
					} else {
						_this.$message.info('视频暂未缓存');
						return;
						
					}
				} else{
					videoUrl.url = url;
					uni.setStorageSync('videoUrl', videoUrl);
					uni.navigateTo({
						url: '/pages/sy/seeVideo/seeVideo'
					})
				}
			},
			
			
			DataListFunc() {
				this.$api.post(global.apiUrls.post65e7d93bb1884, {
					
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.dataList = res.data.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.shop_info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 32rpx 24rpx;
		.shop_info_left {
			font-size: 30rpx;
			font-weight: 600;
		}
		.shop_info_right {
			color: #999;
			font-size: 28rpx;
		}
	}
	/deep/.u-lazy-item {
		width: 260rpx !important;
		height: 200rpx !important;
	}
	.blue_bg {
		background: #3090FF;
	}
	.tabs_info {
		position: relative;
		z-index: 2;
		padding: 0 24rpx;
	}
	.title_bg {
		width: 100%;
		height: 504rpx;
		background: linear-gradient(177deg, #3090FF 0%, rgba(248, 248, 250, 0) 100%);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: var(--benbenbgColor1);
		background-size: 100% auto;
	}

	.home_flex_0 {
		width: 750rpx;
		height: 190rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		padding-bottom: 24rpx;
		// background: #3090FF;
	}

	.home_fd0_1_c0_c1 {
		font-size: 28rpx;
		color: rgba(153, 153, 153, 1);
		margin: 0rpx 0rpx 0rpx 18rpx;
	}

	.home_fd0_1_c0_c0 {
		width: 30rpx;
		height: 30rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.home_fd0_1_c0 {
		background: var(--benbenbgColor1);
		padding: 0rpx 24rpx 0rpx 24rpx;
		margin: 32rpx 30rpx 0rpx 30rpx;
		height: 72rpx;
		border-radius: 12rpx;
	}

	.home_fd0_1 {
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.home_fd0_0_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #FFFFFF;
	}

	.home_fd0_0 {
		margin: 20rpx 0rpx 0rpx 0rpx;
	}

	.home_flex_1 {
		margin: 12rpx 0rpx 0rpx 0rpx;
		position: relative;
		z-index: 2;
	}

	.home_numberfd1_0_c0 {
		background: #525050;
		position: absolute;
		bottom: 20rpx;
		right: 30rpx;
		width: 80rpx;
		height: 40rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 46rpx;
		font-weight: 400;
	}

	.home_fd1_0_c1 {
		width: 702rpx;
		height: 280rpx;
		overflow: hidden;
	}

	.home_fd1_0_c1_c0 {
		width: 690rpx;
		height: 300rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.home_fd1_0 {
		width: 690rpx;
		height: 300rpx;
		overflow: hidden;
	}

	.home_swiperDotUnselectedfd1_0 {
		border: 2px solid var(--benbenbdColor5);
		width: 14rpx;
		height: 14rpx;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		margin: 0rpx 6rpx 0rpx 0rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.home_swiperDotSelectedfd1_0 {
		border: 2px solid var(--benbenbdColor1);
		width: 14rpx;
		height: 14rpx;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		margin: 0rpx 6rpx 0rpx 0rpx;
		font-size: 24rpx;
		color: #fff;
	}

	::v-deep .home_swiperDotfd1_0 {
		position: absolute;
		bottom: 20rpx;
		left: 0rpx;
		right: 0rpx;
	}

	.home_linefd2_0 {
		background: var(--benbenbgColor0);
		width: 40rpx;
		height: 6rpx;
		top: 70rpx;
		background-size: 100% auto !important;
		border-radius: 3rpx;
	}

	.checkTitlefd2_0 {
		font-weight: 700 !important;
		font-size: 32rpx !important;
		color: #333 !important;
		background-color: rgba(255, 255, 255, 1) !important;
	}

	::v-deep .home_benbenTabsfd2_0 {
		background: var(--benbenbgColor1);
		width: 750rpx;
		height: 80rpx;
		white-space: nowrap;
		text-align: center;
		font-size: 28rpx;
		color: rgba(150, 150, 150, 1);
	}

	.home_flex_3 {
		background: var(--benbenbgColor1);
		padding: 15rpx 30rpx 15rpx 30rpx;
		background-size: 100% auto;
	}

	.home_fd3_1_c1_c0_c2_c0 {
		height: 20rpx;
	}

	.home_fd3_0_c1_c0_c2_c1_c0 {
		font-size: 28rpx;
	}

	.home_fd3_0_c1_c0_c2_c1 {
		background: var(--benbenbgColor0);
		background-size: 100% auto;
		color: var(--benbenFontColor3);
		width: 176rpx;
		height: 60rpx;
		border-radius: 12rpx;
	}

	.home_price1_fd3_0_c1_c0_c2_c0_c1 {
		font-size: 34rpx;
		color: rgba(255, 70, 32, 1);
	}

	.home_fd3_0_c1_c0_c2_c0_c1 {
		color: #ff5536;
		font-weight: 600;
	}

	.home_fd3_0_c1_c0_c2_c0_c0 {
		font-size: 22rpx;
		color: rgba(255, 70, 32, 1);
		font-weight: 700;
	}

	.home_fd3_0_c1_c0_c2 {
		width: 100%;
		margin: 20rpx 0rpx 0rpx 0rpx;
	}

	.home_fd3_0_c1_c0_c1_c0 {
		color: rgba(167, 166, 167, 1);
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.home_fd3_0_c1_c0_c0 {
		font-size: 32rpx;
		font-weight: 700;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		color: rgba(16, 16, 16, 1);
	}

	.home_fd3_0_c0_c0 {
		width: 260rpx;
		height: 200rpx;
		border-radius: 16rpx;
	}

	.home_fd3_0_c0 {
		margin: 0rpx 24rpx 0rpx 0rpx;
	}

	.home_fd3_0 {
		background: var(--benbenbgColor1);
		width: 100%;
		margin: 20rpx 0rpx 20rpx 0rpx;
		background-size: 100% auto;
	}

	.home_flex_4 {
		background: #f8f8f8;
		background-size: 100% auto;
		padding: 0rpx 30rpx 0rpx 30rpx;
		margin-top: 24rpx;
	}

	.home_fd4_2_c0 {
		font-size: 32rpx;
		color: var(--benbenFontColor3);
	}

	.home_fd4_2 {
		background: var(--benbenbgColor0);
		border-radius: 8rpx;
		background-size: 100% auto;
		width: 100%;
		line-height: 88rpx;
		height: 88rpx;
		margin-bottom: 24rpx;
	}

	.home_fd4_1_c3_c1_c0_c1 {
		margin: 0rpx 0rpx 0rpx 16rpx;
		width: calc(100% - 56rpx);
	}

	.home_fd4_1_c3_c1_c0_c0 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.home_fd4_1_c3_c1 {
		background: #F8F8FA;
		background-size: 100% auto;
		border-radius: 16rpx;
		margin: 20rpx 0rpx 0rpx 0rpx;
		padding: 24rpx 24rpx 24rpx 24rpx;
	}

	.home_fd4_1_c3_c0_c0 {
		font-size: 32rpx;
		font-weight: 700;
	}

	.home_fd4_1_c3_c0 {
		margin: 32rpx 0rpx 0rpx 0rpx;
	}

	::v-deep .home_fd4_1_c2_c0 {
		width: 100%;
	}

	.home_fd4_1_c1_c0 {
		width: 100%;
		height: 357rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.home_fd4_1_c1 {
		margin: 24rpx 0rpx 24rpx 0rpx;
	}

	.home_linefd4_1_c0_c0 {
		background: var(--benbenbgColor0);
		width: 40rpx;
		height: 6rpx;
		top: 70rpx;
		background-size: 100% auto !important;
	}

	.checkTitlefd4_1_c0_c0 {
		font-weight: 700 !important;
		font-size: 30rpx !important;
		color: #101010 !important;
		background-color: rgba(255, 255, 255, 1) !important;
	}

	::v-deep .home_benbenTabsfd4_1_c0_c0 {
		background: #fff;
		height: 80rpx;
		white-space: nowrap;
		text-align: center;
		font-size: 30rpx;
		color: #969696;
	}

	.home_fd4_1 {
		background: var(--benbenbgColor1);
		width: 100%;
		margin: 24rpx 0rpx 40rpx 0rpx;
		padding: 32rpx 24rpx 32rpx 24rpx;
		background-size: 100% auto;
		border-radius: 0 0 16rpx 16rpx;
	}

	.home_fd4_0_c1_c2_c1 {
		font-size: 34rpx;
		color: rgba(255, 80, 80, 1);
		font-weight: 700;
	}

	.home_fd4_0_c1_c2_c0 {
		font-size: 22rpx;
		color: rgba(255, 80, 80, 1);
		font-weight: 700;
	}

	.home_fd4_0_c1_c1_c0 {
		font-size: 28rpx;
		color: rgba(167, 166, 167, 1);
	}

	.home_fd4_0_c1_c1 {
		margin: 0rpx 0rpx 20rpx 0rpx;
	}

	.home_fd4_0_c1_c0_c0 {
		font-size: 34rpx;
		font-weight: 700;
	}

	.home_fd4_0_c1_c0 {
		margin: 0rpx 0rpx 14rpx 0rpx;
	}

	.home_fd4_0_c1 {
		width: 100%;
		padding: 24rpx 24rpx 24rpx 24rpx;
	}

	.home_fd4_0_c0 {
		width: 100%;
		height: 383rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.home_fd4_0 {
		background: var(--benbenbgColor1);
		width: 100%;
		background-size: 100% auto;
		border-radius: 16rpx 16rpx 0 0;
	}
	
	
	.searchResult_flex_3 {
		padding: 0rpx 32rpx 12rpx 32rpx;
		overflow: hidden;
	}
	
	.searchResult_fd3_0_c1_c2_c1_c1 {
		color: #BBBBBB;
		font-size: 22rpx;
		font-weight: 400;
		line-height: 30rpx;
	}
	
	.searchResult_fd3_0_c1_c2_c1_c0 {
		color: #BBBBBB;
		font-size: 22rpx;
		font-weight: 400;
		line-height: 30rpx;
	}
	
	.searchResult_price2_fd3_0_c1_c2_c0_c1 {
		font-size: 22rpx;
	}
	
	.searchResult_price1_fd3_0_c1_c2_c0_c1 {
		font-size: 22rpx;
	}
	
	.searchResult_fd3_0_c1_c2_c0_c1 {
		color: #BBBBBB;
		font-weight: 400;
		line-height: 30rpx;
		font-size: 22rpx;
		text-decoration: line-through;
	}
	
	.searchResult_fd3_0_c1_c2_c0_c0 {
		color: #BBBBBB;
		font-size: 22rpx;
		font-weight: 400;
		line-height: 30rpx;
		text-decoration: line-through;
	}
	
	.searchResult_fd3_0_c1_c2 {
		margin: 10rpx 0rpx 0rpx 0rpx;
	}
	
	.searchResult_price2_fd3_0_c1_c1_c1 {
		font-size: 22rpx;
	}
	
	.searchResult_price1_fd3_0_c1_c1_c1 {
		font-size: 32rpx;
		font-weight: 700;
		color: #FF4133;
	}
	
	.searchResult_fd3_0_c1_c1_c1 {
		color: #E5393C;
		font-weight: 700;
		font-size: 36rpx;
		line-height: 48rpx;
	}
	
	.searchResult_fd3_0_c1_c1_c0 {
		font-size: 22rpx;
		font-weight: 700;
		color: #FF4133;
	}
	
	.searchResult_fd3_0_c1_c0 {
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		font-size: 30rpx;
		font-weight: 500;
		color: #222222;
		height: 85rpx;
	}
	
	.searchResult_fd3_0_c1 {
		margin: 24rpx 16rpx 16rpx 16rpx;
	}
	
	.searchResult_fd3_0_c0 {
		width: 320rpx;
		height: 320rpx;
		border-radius: 16rpx 18rpx 0rpx 0rpx;
	}
	
	.searchResult_fd3_0 {
		background: rgba(255, 255, 255, 1);
		background-size: 100% auto !important;
		margin: 10rpx 40rpx 5rpx 0rpx;
		width: 320rpx;
		float: left;
	}
	.searchResult_fd3_0:nth-child(2n+2) {
		margin: 10rpx 0rpx 5rpx 0rpx;
	}
</style>